<template>
  <body-page>
    <div class="body-page-child">
      <el-form style="width: 40%;" ref="form" :model="form" label-width="80px" :rules="rule">

        <el-form-item label="账号">
          <el-input v-model="form.account" readonly></el-input>
        </el-form-item>

        <el-form-item label="角色">
          <role-select v-model="form.roleCodeList" :multiple="true" :disabled="true"></role-select>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>

      </el-form>
    </div>
  </body-page>
</template>

<script>
import BodyPage from '../components/BodyPage'
import RoleSelect from '../components/RoleSelect'
export default {
  name: 'LoginDetail',
  components: {RoleSelect, BodyPage},
  data () {
    return {
      form: {
        code: '',
        account: '',
        name: '',
        phone: '',
        roleCodeList: []
      },
      rule: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      let vm = this
      this.$axios.post(vm.$API.others.updateLoginInfo, vm.$qs.stringify(vm.form)).then(response => {
        if (response.data.code === 2000) {
          vm.$message.success(response.data.message)
          vm.onCancel()
        } else {
          vm.$message.error(response.data.message)
        }
      }).catch(response => {
        console.log(response)
        vm.$message.error('系统异常')
      })
    },
    onCancel () {
      this.$router.back()
    }
  },
  created () {
    let vm = this

    // 获取用户信息
    this.$axios.post(vm.$API.user.detail, vm.$qs.stringify({code: vm.$route.query.code})).then(response => {
      if (response.data.code === 2000) {
        for (let key in vm.form) {
          vm.form[key] = response.data.data[key]
        }
      } else {
        vm.$message.error(response.data.message)
        vm.onCancel()
      }
    }).catch(response => {
      console.log(response)
      vm.$message.error('系统异常')
    })
  }
}
</script>

<style scoped>

  .body-page-child {
    padding-top: 20px;
    padding-bottom: 30px;
    background-color: white;
  }

</style>
